<template>
	<view class="page">
		<view class="b-bg-white b-text-black-d" v-for="(item,index) in rows" :key="index">
			<view class="tabs" @tap="detail(item.refundId)">
				<view class="h1">
					<view class="h">
						{{item.contractName}}
					</view>
				</view>
				<view class="detail" :style="item.postCode!=postCode?'border:none':''">
					<view class="checked">
					</view>
					<view style="padding: 10rpx 0;width: 90%;">
						<view class="p">
							主体：{{item.contractForm==1?'个人':'企业'}}
						</view>
						<view class="p">
							申请人：{{item.cardName}}
						</view>
						<view class="p">
							退费状态：
							<text
								:style="item.refundState==0?'color:#51aa37':item.refundState==1?'color:#51aa37':item.refundState==2?'color:#51aa37':item.refundState==3?'color:#ff6d00':item.refundState==4?'color:#ff0200':''">{{item.refundState==1?'待审核':item.refundState==2?'审核中':item.refundState==3?'审核完毕':item.refundState==4?'已驳回':''}}</text>
						</view>
						<view class="p">
							退房日期：{{item.refundTime}}
						</view>
					</view>
				</view>
				<view class="btn-flex" v-if="item.postCode==postCode">
					<button @tap="sh(item.refundId)" type="primary"
						style="font-size: 22rpx;margin: 15rpx 0 15rpx 20rpx;">
						审核
					</button>
				</view>

			</view>
			<!-- <div class="load" v-show="isLoadDowning == 1">
				<image class="loadImg" lazy-load="true" src="https://gateway.yijushenyang.com/static/img/loading.png"
					alt=""></image>
				<span>加载中</span>
			</div>
			<div class="load" v-show="isLoadDowning == 2">
				<span>没有更多了～</span>
			</div> -->
		</view>

		<view style="width: 100%;height: 200rpx;">

		</view>
	</view>
</template>

<script>
	import {
		throttle
	} from "@/utils/throttle.js"
	export default {
		data() {
			return {
				menuLists: [],
				// tabs1: ["待支付", "已支付", "已失效"],
				tabs1Current: 0,
				check: false,
				contractState: 1,
				allChecked: false,
				pageNum: 1,
				pageSize: 10,
				isLoadDowning: 0,
				loadBottom: true,
				list: [],
				rows: [],
				parem: [],
				permission: uni.getStorageSync('permission'),
				postCode: uni.getStorageSync('user'),
			}
		},
		onLoad() {

		},

		onShow() {
			if (uni.getStorageSync('openId')) {
				this.init()
			}
		},

		onReachBottom() {
			if (this.loadBottom) {
				this.pageNum += 1;
				if (this.pageNum <= Math.ceil(this.list.total / this.pageSize)) {
					this.isLoadDowning = 1
					this.init()
				}
			} else {
				this.isLoadDowning = 2
			}
		},

		methods: {
			// getPermission() {
			// 	let data = {
			// 		openId: uni.getStorageSync('openId')
			// 	}

			// 	this.api.get('hetong/refund/app/selPostCodeApp', data).then(res => {
			// 		console.log(res);
			// 		uni.setStorageSync('user', res.data.postCode)
			// 		uni.setStorageSync('userDeptId', res.data.userDeptId)

			// 		this.init()
			// 	})
			// },

			init() {
				let old = this.rows
				let data = {
					postCode: uni.getStorageSync('user'),
					userDeptId: uni.getStorageSync('userDeptId'),
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}
				if (uni.getStorageSync("openId")) {
					this.api.get('hetong/refund/app/listApp', data).then(res => {
						if (res.data.code == 200) {
							this.list = res.data
							let news = res.data.rows
							if (res.data.total == 0) {
								this.isLoadDowning = 2
								this.loadBottom = false
							} else if (this.pageNum == 1) {
								this.rows = res.data.rows
								this.isLoadDowning = 0
							} else if (this.pageNum > 1) {
								this.rows = old.concat(news)
								this.isLoadDowning = 0
							}

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1500,
							});
						}
					})
				} else {
					this.loginTip()
				}
			},

			loginTip() {
				uni.showToast({
					title: '请登陆',
					icon: 'none',
					duration: 2000
				});
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 2000);
			},

			detail(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/my/process?refundId=" + item
				})
			},

			sh(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/my/handle-process?refundId=" + item + '&refundChange=H'
				})
			},
		}
	}
</script>

<style lang="scss">
	.btn-flex {
		width: 86%;
		margin: 0 auto;
		display: flex;
		justify-content: flex-end;

		#btn {
			// line-height: auto;
			padding: 8rpx 20rpx;
			border-radius: 100rpx;
			border: 1rpx solid #999;
			font-size: 22rpx;
			margin: 15rpx 0;
		}
	}

	.page {
		// background-color: #f5f5f5;
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #f9f9f9;
	}

	.b-tabs {
		width: 750rpx;
	}

	.b-tabs-container {
		display: flex;
		padding: 20rpx 0 0;
		background-color: white;
	}

	.b-tabs-item {
		padding: 0 0 14rpx;
		width: 100rpx;
		margin: 0 25rpx;
		text-align: center;
	}

	.b-tabs-active {
		color: #ff7100;
		font-weight: bold;
		border-bottom: 6rpx solid #ff7100;
		border-radius: 2rpx;
	}

	.tabs {
		margin: 20rpx auto 0;
		width: 720rpx;
		// height: 300rpx;
		border-radius: 15rpx;
		background-color: #fff;
		filter: drop-shadow(4rpx 4rpx 6rpx gray); // 设置图片的阴影
		// display: flex;

		.h1 {
			width: 90%;
			margin: 0 auto;
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			font-weight: bold;
			border-bottom: 2rpx solid #f2f4fa;
		}

		.detail {
			width: 100%;
			// height: 180rpx;
			margin: 0 auto;
			// padding: 15rpx 30rpx;
			font-size: 26rpx;
			display: flex;
			border-bottom: 2rpx solid #f2f4fa;
		}

		.checked {
			width: 45.5rpx;
			// background-color: #ff7100;
		}



		.p {
			font-size: 24rpx;
			width: 95%;
			margin-bottom: 2rpx;
		}
	}


	.load {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 10px;
		margin-top: 100rpx;
	}

	.loadImg {
		margin-right: 10px;
		width: 20px;
		height: 20px;
		animation: animation 3s linear infinite;
	}

	.load span {
		color: #999;
		font-size: 14px;
	}

	.fixed {
		width: 100%;
		height: 10vh;
		background-color: #f9ffff;
		position: fixed;
		bottom: 0;
		display: flex;
	}

	.icon {
		width: 30rpx;
		height: 30rpx;
		border-radius: 45rpx;
		border: 1rpx solid #ff7100;
		margin-left: 28.75rpx;
	}

	.all-icon {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 8rpx;
		left: 15rpx;
	}

	.all-text {
		position: absolute;
		top: 8rpx;
		left: 100rpx;
		font-size: 34rpx;
	}

	#submit {
		border-radius: 100rpx;
		background: #fd7700;
		text-align: center;
		height: 7vh;
		line-height: 7vh;
		width: 55%;
		color: #f3f3f3;
		margin: 1.5vh 0 1.5vh 10%;
		font-size: 30rpx;
	}
</style>